<template>
  <div class="tablebox">
    <div class="table-head">
      <div class="single-item">所属企业</div>
      <div class="single-item">分路名称</div>
      <div class="single-item">发生时间</div>
      <div class="single-item">事件详情</div>
    </div>
    <div class="table-body">
      <vueSeamless :data="lists" class="seamless-warpper" :class-option="optionSingleHeightTime">
        <div class="single-item" :class="operateClassName(item.state)" v-for="(item, index) in lists" :key="index">
          <div class="item">{{item.companyName}}</div>
          <div class="item">{{!!item.deviceName ? item.deviceName: '-'}}</div>
          <div class="item">{{moment(item.happenTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
          <div class="item" :title="item.content">{{filterText(item.content)}}</div>
        </div>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from 'vuex';
  import vueSeamless from 'vue-seamless-scroll'
  export default {
    components: {
      vueSeamless
    },
    data() {
      return {
        lists: this.exceptionList,
        scrollTop: false
      }
    },
    mounted() {
      this.lists = this.exceptionList;
    },
    watch: {
      exceptionList: {
        deep: true,
        handler() {
          this.lists = this.exceptionList;
        }
      }
    },
    computed: {
      ...mapState({
        exceptionList: state => state.cityInfo.exceptionList,
      }),
      optionSingleHeightTime() {
        return {
          step: .1
        }
      }
    },
    methods: {
      operateClassName(s) {
        let classNames = {
          1: 'color-green',
          2: "color-red",
          3: "color-red"
        };
        if (s in classNames) return classNames[s];
        else return classNames[1]
      },
      filterText(str) {
        if (str.length > 7)
          return str.substr(0, 5) + "..."
        return str;

      }
    }
  }

</script>
